<?php
require_once 'php-sdk/facebook.php' ;
require_once 'php-sdk/base_facebook.php' ;
require_once "gameAPI.php";

$supervisor_items = get_items('Supervisor') ;
$office_worker_items = get_items('Office worker') ;
$production_worker_items = get_items('Production line worker') ;
$user_id = get_user_id() ;
$factory_id = get_factory_id($user_id) ;
$credit = get_credit($user_id) ;
$supervisor_num_of_slots = get_supervisor_num_of_slots ($factory_id) ;
$office_worker_num_of_slots = get_office_worker_num_of_slots ($factory_id) ;
$production_worker_num_of_slots = get_production_worker_num_of_slots ($factory_id) ;

?>


<html>

	<head>
		<title> Buy Screen </title>
		<script src="js/jquery.js"> </script>
		<!-- CSS STYLE -->
		<!--------------------------------------------------------------------------------------------------------------------------------->
		<style type="text/css">
			<!--
			#canvas {
				height: 780px;
				width: 745px;
				background-image: url(images/Upgrade/upgrade_page_background.jpg);
				position: absolute;
			}
			#TopRightBar {
				height: 60px;
				width: 353px;
				right: 20px;
				top: 21px;
				position: absolute;
			}
			#FactoryButton {
				height: 55px;
				width: 55px;
				left: 8px;
				top: 3px;
				background-image: url(images/Upgrade/factory.png);
				position: absolute;
			}
			#StatusButton {
				height: 40px ;
				width: 140px ;
				left: 65px ;
				top: 10px;
				background-image: url(images/Upgrade/status.png);
				position: absolute;
			}
			#HelpButton {
				height: 40px ;
				width: 140px ;
				right: 7px ;
				top: 10px;
				background-image: url(images/Upgrade/help.png);
				position: absolute;
			}
			#BottomLeftBar {
				height: 60px;
				width: 331px;
				bottom: 21px;
				left: 20px;
				position: absolute;
			}
			#BuyButton {
				height: 40px;
				width: 140px;
				top: 13px;
				left: 13px;
				background-image: url(images/Upgrade/buy.png);
				position: absolute;
			}
			#CostArea {
				color: rgb(138,90,61);
				font-family: "Trebuchet MS",Helvetica,sans-serif;
				font-size: 40px;
				height: 40px;
				position: absolute;
				right: 20px;
				text-align: right;
				top: 8px;
				width: 95px;
			}
			#BottomRightBar {
				height: 60px;
				width: 353;
				right: 20px;
				bottom: 21px;
				position: absolute;
			}
			#CreditArea {
				color: rgb(138,90,61);
				font-family: "Trebuchet MS",Helvetica,sans-serif;
				font-size: 40px;
				height: 40px;
				position: absolute;
				right: 20px;
				text-align: right;
				top: 8px;
				width: 95px;
			}
			#CashArea {
				color: rgb(138,90,61);
				font-family: "Trebuchet MS",Helvetica,sans-serif;
				font-size: 40px;
				height: 40px;
				position: absolute;
				right: 20px;
				text-align: right;
				top: 8px;
				width: 95px;
			}
			#BackButton {
				height: 40px;
				width: 140px;
				top: 15px;
				left: 49px;
				background-image: url(images/Upgrade/back.png);
				position: absolute;
			}
			#SupervisorItemBox {
				height: 179px;
				left: 20px;
				position: absolute;
				top: 103px;
				width: 331px;
			}
			#OfficeWorkerItemBox {
				height: 177px;
				left: 20px;
				position: absolute;
				top: 302px;
				width: 331px;
			}
			#ProductionWorkerItemBox {
				height: 190px;
				left: 20px;
				position: absolute;
				top: 501px;
				width: 331px;
			}
			#SupervisorBox {
				height: 179px;
				right: 20px;
				position: absolute;
				top: 103px;
				width: 353px;
			}
			#OfficeWorkerBox {
				height: 177px;
				right: 20px;
				position: absolute;
				top: 302px;
				width: 353px;
			}
			#ProductionWorkerBox {
				height: 190px;
				right: 20px;
				position: absolute;
				top: 501px;
				width: 353px;
			}
			.PopUp span {
				position: absolute;
				padding: 0px;
				left: -1000px;
				visibility: hidden;
			}
			.PopUp:hover span {
				visibility: visible;
				top: 20px;
				left: 70px;
				z-index: 50;
				position: absolute;
			}
			-->
		</style>
		<!--JAVA SCRIPT ACTIONS-->
        <!--------------------------------------------------------------------------------------------------------------------------------->
		<script type="text/javascript">
			var credit = <?php echo $credit ?> ;
			var item_name ;
			var item_cost = 0 - 1 ;
			var item_id ;
			var item_quantity ;
			var item_job_title_id ;
			var limit ;

			<!--Factory Button Actions-->
			function FactoryButtonOnClick () {
				document.getElementById("FactoryButton").style.backgroundImage = "url('images/Upgrade/factory_click.png')" ;
				window.location.href= "factory.php" ;
			}
			function FactoryButtonOnMouseOver () {
				document.getElementById("FactoryButton").style.backgroundImage = "url('images/Upgrade/factory_over.png')" ;
			}
			function FactoryButtonOnMouseOut () {
				document.getElementById("FactoryButton").style.backgroundImage = "url('images/Upgrade/factory.png')" ;
			}
			<!--Status Button Actions-->
			function StatusButtonOnClick () {
				document.getElementById("StatusButton").style.backgroundImage = "url('images/Upgrade/status_click.png')" ;
				window.location.href= "play.php" ;
			}
			function StatusButtonOnMouseOver () {
				document.getElementById("StatusButton").style.backgroundImage = "url('images/Upgrade/status_over.png')" ;
			}
			function StatusButtonOnMouseOut () {
				document.getElementById("StatusButton").style.backgroundImage = "url('images/Upgrade/status.png')" ;
			}
			<!--Help Button Actions-->
			function HelpButtonOnClick () {
				document.getElementById("HelpButton").style.backgroundImage = "url('images/Upgrade/help_click.png')" ;
				window.location.href= "help.php" ;
			}
			function HelpButtonOnMouseOver () {
				document.getElementById("HelpButton").style.backgroundImage = "url('images/Upgrade/help_over.png')" ;
			}
			function HelpButtonOnMouseOut () {
				document.getElementById("HelpButton").style.backgroundImage = "url('images/Upgrade/help.png')" ;
			}
			<!--Buy Button Actions-->
			function BuyButtonOnClick () {
				document.getElementById("BuyButton").style.backgroundImage = "url('images/Upgrade/buy_click.png')" ;
				document.getElementById("CostArea").innerHTML = "" ;
				if (item_cost >= 0) {
					if (credit >= item_cost) {
						switch (item_id) {
							case 1:
							case 2: limit = <?php echo $supervisor_num_of_slots ; ?> ;
								break ;
							case 3:
							case 4: limit = <?php echo $office_worker_num_of_slots ; ?> ;
								break ;
							case 5:
							case 6: limit = <?php echo $production_worker_num_of_slots ; ?> ;
								break ;
						}
						if (limit > item_quantity) {
							credit = credit - item_cost ;
							Post () ;						
						} else 
							alert ("You have equipped this item for all your respective employees! Add more slots before buying this item!") ;
					} else
						alert ("Dear Sir/Madam, You have insufficient fund. Please come back later with more cash! =))") ;
				}				
			}
			function BuyButtonOnMouseOver () {
				document.getElementById("BuyButton").style.backgroundImage = "url('images/Upgrade/buy_over.png')" ;
			}
			function BuyButtonOnMouseOut () {
				document.getElementById("BuyButton").style.backgroundImage = "url('images/Upgrade/buy.png')" ;
			}
			<!--Update Cost at the top corner-->
			function UpdateCost (name, id, cost, quantity, job_title_id) {
				item_name = name ;
				item_cost = cost ;
				item_id = id ; 
				item_job_title_id = job_title_id ;
				item_quantity = quantity ;
				document.getElementById("CostArea").innerHTML = item_cost;
			}
			function Post () {
				FB.ui( {
					method: 'feed',
					name: 'Goshhh, my factory is expanding!!!!!',
					link: 'apps.facebook.com/frenfactory',
					picture: 'http://107.20.229.155/frenfactory/images/Upgrade/' + item_name + '_icon.png',
					caption: 'I just bought a ' + item_name + ' !',
					},
					function(response) {
						if (response && response.post_id) {
							var string = "gameAPI.php?func=buy_item&factory_id=<?php echo $factory_id ?>&item_id=" + item_id + "&credit=" + credit 
										+ "&job_title_id=" + item_job_title_id + "&quantity=" + item_quantity ;
							window.location.href=string;
						} else {
							var string = "gameAPI.php?func=buy_item&factory_id=<?php echo $factory_id ?>&item_id=" + item_id + "&credit=" + credit 
										+ "&job_title_id=" + item_job_title_id + "&quantity=" + item_quantity ;
							window.location.href=string;
						}}
				);
			} 
		</script>
		
		<script type="text/javascript">

			var _gaq = _gaq || [];
			  _gaq.push(['_setAccount', 'UA-25431105-1']);
			  _gaq.push(['_trackPageview']);

			  (function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			  })();

		</script> 
	</head>
	
<!--------------------------------------------------------------------------------------------------------------------------------->
<!--BODY-->
<!--------------------------------------------------------------------------------------------------------------------------------->
	
	<body style = "margin: 0px">
	
		<!--GUI COMPONENTS-->
		<!--------------------------------------------------------------------------------------------------------------------------------->
		
		<div id = "canvas"> 
			<!--TOP RIGHT BAR-->
			<!--------------------------------------------------------------------------------------------------------------------------------->
			<div id = "TopRightBar">
				<div id = "FactoryButton" onClick = "FactoryButtonOnClick()" onMouseOver = "FactoryButtonOnMouseOver()" onMouseOut = "FactoryButtonOnMouseOut()"> </div>
				<div id = "StatusButton" onClick = "StatusButtonOnClick()" onMouseOver = "StatusButtonOnMouseOver()" onMouseOut = "StatusButtonOnMouseOut()"> </div>
				<div id = "HelpButton" onClick = "HelpButtonOnClick()" onMouseOver = "HelpButtonOnMouseOver()" onMouseOut = "HelpButtonOnMouseOut()"> </div>
			</div>
			<!--BOTTOM  RIGHT BAR-->
			<!--------------------------------------------------------------------------------------------------------------------------------->
			<div id = "BottomRightBar">
				<div id = "CreditArea"> <?php echo $credit ?></div>
			</div>
			<!--BOTTOM  RIGHT BAR-->
			<!--------------------------------------------------------------------------------------------------------------------------------->
			<div id = "BottomLeftBar">
				<div id = "BuyButton" onClick = "BuyButtonOnClick()" onMouseOver = "BuyButtonOnMouseOver()" onMouseOut = "BuyButtonOnMouseOut()"> </div>				
				<div id = "CostArea"> </div>
			</div>
			<!--SUPERVISOR ITEM BOX-->
			<!--------------------------------------------------------------------------------------------------------------------------------->
			<div id = "SupervisorItemBox">
				<table style = "position: absolute; width: 350px; top: 20px; left: 10px;">
					<?php foreach ($supervisor_items as $item) :?>
						<tr>
							<td> <a class = "PopUp" style = "position: relative;"> 
									<image name = "<?php echo $item["item_name"] ?>" src = "images/Upgrade/<?php echo $item["item_name"] ?>_text.png" 
											onMouseOver = "document.images['<?php echo $item["item_name"] ?>'].src='images/Upgrade/<?php echo $item["item_name"] ?>_text_over.png' " 
											onMouseOut = "document.images['<?php echo $item["item_name"] ?>'].src='images/Upgrade/<?php echo $item["item_name"] ?>_text.png' " /> 
									<span> <img src = "images/Upgrade/Pop Ups/<?php echo $item["item_name"] ?>.png" /> </span>
								</a>
							</td>
							<td> <image src = "images/Upgrade/<?php echo $item["item_name"] ?>_icon.png" /> </td>
							<td> <image name = "<?php echo $item["item_name"] ?>_<?php echo $item["cost"] ?>"
										src = "images/Upgrade/<?php echo $item["cost"] ?>.png" 
										onClick = "UpdateCost('<?php echo $item["item_name"] ?>', <?php echo $item["item_id"] ?>, <?php echo $item["cost"] ?>, 
																<?php echo get_item_quantity($factory_id,$item["item_id"]) ?>, <?php echo get_job_title_id('Supervisor') ?> )" 
										onMouseOver = "document.images['<?php echo $item["item_name"] ?>_<?php echo $item["cost"] ?>'].src='images/Upgrade/<?php echo $item["cost"] ?>_over.png' " 
										onMouseOut = "document.images['<?php echo $item["item_name"] ?>_<?php echo $item["cost"] ?>'].src='images/Upgrade/<?php echo $item["cost"] ?>.png' "/> 
							</td>
						</tr>
					<?php endforeach ; ?>						
				</table>
			</div>
			<!--OFFICE WORKER ITEM BOX-->
			<!--------------------------------------------------------------------------------------------------------------------------------->
			<div id = "OfficeWorkerItemBox">
				<table style = "position: absolute; width: 350px; top: 20px; left: 10px;">
					<?php foreach ($office_worker_items as $item) :?>
						<tr>
							<td> <a class = "PopUp" style = "position: relative;"> 
									<image name = "<?php echo $item["item_name"] ?>" src = "images/Upgrade/<?php echo $item["item_name"] ?>_text.png" 
											onMouseOver = "document.images['<?php echo $item["item_name"] ?>'].src='images/Upgrade/<?php echo $item["item_name"] ?>_text_over.png' " 
											onMouseOut = "document.images['<?php echo $item["item_name"] ?>'].src='images/Upgrade/<?php echo $item["item_name"] ?>_text.png' " /> 
									<span> <img src = "images/Upgrade/Pop Ups/<?php echo $item["item_name"] ?>.png" /> </span>
								</a>
							</td>
							<td> <image src = "images/Upgrade/<?php echo $item["item_name"] ?>_icon.png" /> </td>
							<td> <image name = "<?php echo $item["item_name"] ?>_<?php echo $item["cost"] ?>"
										src = "images/Upgrade/<?php echo $item["cost"] ?>.png" 
										onClick = "UpdateCost('<?php echo $item["item_name"] ?>', <?php echo $item["item_id"] ?>, <?php echo $item["cost"] ?>, 
																<?php echo get_item_quantity($factory_id,$item["item_id"]) ?>, <?php echo get_job_title_id('Office worker') ?> )" 
										onMouseOver = "document.images['<?php echo $item["item_name"] ?>_<?php echo $item["cost"] ?>'].src='images/Upgrade/<?php echo $item["cost"] ?>_over.png' " 
										onMouseOut = "document.images['<?php echo $item["item_name"] ?>_<?php echo $item["cost"] ?>'].src='images/Upgrade/<?php echo $item["cost"] ?>.png' "/> 
							</td>
						</tr>
					<?php endforeach ; ?>						
				</table>
			</div>
			<!--PRODUCTION WORKER ITEM BOX-->
			<!--------------------------------------------------------------------------------------------------------------------------------->
			<div id = "ProductionWorkerItemBox">
				<table style = "position: absolute; width: 350px; top: 20px; left: 10px;">
					<?php foreach ($production_worker_items as $item) :?>
						<tr>
							<td> <a class = "PopUp" style = "position: relative;"> 
									<image name = "<?php echo $item["item_name"] ?>" src = "images/Upgrade/<?php echo $item["item_name"] ?>_text.png" 
											onMouseOver = "document.images['<?php echo $item["item_name"] ?>'].src='images/Upgrade/<?php echo $item["item_name"] ?>_text_over.png' " 
											onMouseOut = "document.images['<?php echo $item["item_name"] ?>'].src='images/Upgrade/<?php echo $item["item_name"] ?>_text.png' " /> 
									<span> <img src = "images/Upgrade/Pop Ups/<?php echo $item["item_name"] ?>.png" /> </span>
								</a>
							</td>
							<td> <image src = "images/Upgrade/<?php echo $item["item_name"] ?>_icon.png" /> </td>
							<td> <image name = "<?php echo $item["item_name"] ?>_<?php echo $item["cost"] ?>"
										src = "images/Upgrade/<?php echo $item["cost"] ?>.png" 
										onClick = "UpdateCost('<?php echo $item["item_name"] ?>', <?php echo $item["item_id"] ?>, <?php echo $item["cost"] ?>, 
																<?php echo get_item_quantity($factory_id,$item["item_id"]) ?>, <?php echo get_job_title_id('Production line worker') ?> )" 
										onMouseOver = "document.images['<?php echo $item["item_name"] ?>_<?php echo $item["cost"] ?>'].src='images/Upgrade/<?php echo $item["cost"] ?>_over.png' " 
										onMouseOut = "document.images['<?php echo $item["item_name"] ?>_<?php echo $item["cost"] ?>'].src='images/Upgrade/<?php echo $item["cost"] ?>.png' "/> 
							</td>
						</tr>
					<?php endforeach ; ?>						
				</table>
			</div>
			<!--SUPERVISOR BOX-->
			<!--------------------------------------------------------------------------------------------------------------------------------->
			<div id = "SupervisorBox">
				<table style = "position: absolute; top: 35px; left: 20px; width: 300px; height: 160px;">
					<?php 
						for ($i = 1; $i <= $supervisor_num_of_slots; $i++) {
							if ($i % 3 == 1)
								echo "<tr style = \"height: 50%; width: 100%; \">" ;
							echo "<td> 
									<div style = \"position: relative; height: 100%; width: 100%; \">
										<div style = 'position: absolute; left: 0px; top: 0px; height: 50px; width: 50px; background-image: url(images/Upgrade/blank_profile_picture_small.jpg)'> </div> " ;
									$counter = 0 ;
									foreach ($supervisor_items as $item) {
										if (get_item_quantity($factory_id,$item["item_id"]) >= $i) {
											++$counter;
											echo "<div style= 'position: absolute; left: 55px; top: " . ($counter - 1) * 25 . "px; height: 25px; width: 25px; 
													background-image: url(\"images/Upgrade/" . $item["item_name"] . "_icon_mini.png\")'> </div> " ;
										}
									}
							echo 	"</div>
								  </td>" ;
							if ($i % 3 == 0)
								echo "</tr>" ;
						}					
					?>
				</table>
			</div>
			<!--OFFICE WORKER BOX-->
			<!--------------------------------------------------------------------------------------------------------------------------------->
			<div id = "OfficeWorkerBox">
				<table style = "position: absolute; top: 35px; left: 20px; width: 300px; height: 160px;">
					<?php 
						for ($i = 1; $i <= $office_worker_num_of_slots; $i++) {
							if ($i % 3 == 1)
								echo "<tr style = \"height: 50%; width: 100%; \">" ;
							echo "<td> 
									<div style = \"position: relative; height: 100%; width: 100%; \">
										<div style = 'position: absolute; left: 0px; top: 0px; height: 50px; width: 50px; background-image: url(images/Upgrade/blank_profile_picture_small.jpg)'> </div> " ;
									$counter = 0 ;
									foreach ($office_worker_items as $item) {
										if (get_item_quantity($factory_id,$item["item_id"]) >= $i) {
											++$counter;
											echo "<div style= 'position: absolute; left: 55px; top: " . ($counter - 1) * 25 . "px; height: 25px; width: 25px; 
													background-image: url(\"images/Upgrade/" . $item["item_name"] . "_icon_mini.png\")'> </div> " ;
										}
									}
							echo 	"</div>
								  </td>" ;
							if ($i % 3 == 0)
								echo "</tr>" ;
						}					
					?>
				</table>
			</div>
			<!--PRODUCTION WORKER BOX-->
			<!--------------------------------------------------------------------------------------------------------------------------------->
			<div id = "ProductionWorkerBox">
				<table style = "position: absolute; top: 35px; left: 20px; width: 300px; height: 160px;">
					<?php 
						for ($i = 1; $i <= $production_worker_num_of_slots; $i++) {
							if ($i % 3 == 1)
								echo "<tr style = \"height: 50%; width: 100%; \">" ;
							echo "<td> 
									<div style = \"position: relative; height: 100%; width: 100%; \">
										<div style = 'position: absolute; left: 0px; top: 0px; height: 50px; width: 50px; background-image: url(images/Upgrade/blank_profile_picture_small.jpg)'> </div> " ;
									$counter = 0 ;
									foreach ($production_worker_items as $item) {
										if (get_item_quantity($factory_id,$item["item_id"]) >= $i) {
											++$counter;
											echo "<div style= 'position: absolute; left: 55px; top: " . ($counter - 1) * 25 . "px; height: 25px; width: 25px; 
													background-image: url(\"images/Upgrade/" . $item["item_name"] . "_icon_mini.png\")'> </div> " ;
										}
									}
							echo 	"</div>
								  </td>" ;
							if ($i % 3 == 0)
								echo "</tr>" ;
						}					
					?>
				</table>
			</div>
		</div>
	</body>

</html>